<template>
  <view class="canvasControl">
    <view class="canvasControl-container">
      <view class="info flex">
        <view class="info-item">
          <view>{{ collData.lineCount | isNull }}</view>
          <view class="title">
            <image
              class="imageStyle"
              src="@/static/images/lineCount.png"
              mode="aspectFit"
            >
            </image>
            总行数</view
          >
        </view>
        <view class="info-item">
          <view>{{ collData.brandCount | isNull }}</view>
          <view class="title">
            <image
              class="imageStyle"
              src="@/static/images/brandCount.png"
              mode="aspectFit"
            >
            </image
            >品牌数</view
          >
        </view>
        <view class="info-item">
          <view>{{ collData.boxCount | isNull }}</view>
          <view class="title">
            <image
              class="imageStyle"
              src="@/static/images/packCount.png"
              mode="aspectFit"
            >
            </image
            >烟盒数</view
          >
        </view>
        <view class="info-item">
          <view>{{ collData.tagCount | isNull }}</view>
          <view class="title">
            <image
              class="imageStyle"
              src="@/static/images/tagCount.png"
              mode="aspectFit"
            >
            </image
            >价签数</view
          >
        </view>
      </view>
      <view class="info flex">
        <view class="info-item">
          <view class="imageCenter">
            <image
              class="imageStyle1"
              src="@/static/images/packSkew.png"
              mode="aspectFit"
            >
            </image
          ></view>
          <view>烟盒歪斜 {{ collData.boxAskew | isNull }}</view>
        </view>
        <view class="info-item">
          <view class="imageCenter">
            <image
              class="imageStyle1"
              src="@/static/images/packDefect.png"
              mode="aspectFit"
            >
            </image
          ></view>
          <view>烟盒缺失 {{ collData.boxLost | isNull }}</view>
        </view>
        <view class="info-item">
          <view class="imageCenter">
            <image
              class="imageStyle1"
              src="@/static/images/tagDefect.png"
              mode="aspectFit"
            >
            </image
          ></view>
          <view>价签缺失 {{ collData.tagLost | isNull }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Vue from "vue";

export default Vue.extend({
  props: ["collData"],

  filters: {
    isNull: function (value) {
      return value == null || value == undefined ? "--" : value;
    }
  }
});
</script>

<style lang="scss" scoped>
.canvasControl {
  // height: 221rpx;
  padding: 21rpx 29rpx;
  overflow: hidden;
  &-container {
    background: #ffffff;
    border-radius: 14rpx 14rpx 14rpx 14rpx;
    // padding: 29rpx;

    .switch {
      //   height: 97rpx;
      font-size: 29rpx;
      font-weight: 500;
      color: #405680;
      padding: 29rpx;
      border-width: 0;
      border-bottom-width: 2rpx;
      border-style: solid;
      border-color: #e1e6f0;
    }
    .info {
      padding: 21rpx 29rpx;
      font-size: 25rpx;
      font-weight: 400;
      color: #405680;
      &:first-of-type {
        border-width: 0;
        border-bottom-width: 2rpx;
        border-style: solid;
        border-color: #e1e6f0;
      }
      .title {
        color: #40568060;
      }
      &-item {
        text-align: center;
        .imageStyle {
          width: 22rpx;
          height: 26rpx;
          vertical-align: middle;
          margin-right: 7rpx;
        }
        .imageStyle1 {
          width: 50rpx;
          height: 75rpx;
          vertical-align: middle;
          margin-right: 7rpx;
        }
      }
    }
  }
}
.imageCenter {
  text-align: center;
}
</style>
